<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="客户管理" name="first">
            <!--收起选项卡-->
            <el-container>
                <el-header style="height: 60px;margin-align:left;">
                    <!--最大div-->
                    <div style="margin-top: -10px">
                        <!--新建栏-->
                        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="3">
                                    <span style="font-size: 19px;line-height:40px;margin-left: 5px">客户管理</span>
                                </el-col>
                                <el-col :span="7">
                                    <span>场景：</span>
                                    <el-select @change="changebusni2" v-model="xsgj" style="width: 150px;" placeholder="全部客户">
                                        <el-option
                                                v-for="item in options" :key="item.xz"
                                                :label="item.label" :value="item.xz">
                                        </el-option>
                                    </el-select>
                                    <el-button style="background-color: #F05050;color: white;margin-left: 10px;" @click="cancelseek" icon="el-icon-back" v-show="seek" size="mini" round>解除搜索</el-button>
                                </el-col>
                                <el-col :span="7">
                                    <el-input clearable placeholder="请输入客户名称/手机/电话" v-model="input3" @keyup.enter.native="initData" style="width: 250px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-button size="medium" @click="gotoMenu" type="primary" style="margin-left: 85px;">新建客户</el-button>
<!--                                    <el-button size="medium" @click="exportExcels" icon="el-icon-folder-remove" style="margin-left: 10px;">导出</el-button>-->
<!--                                    <el-upload ref="upload" action="/" :show-file-list="false" :on-change="importExcel"-->
<!--                                                :auto-upload="false">-->
<!--                                        <el-button size="medium" icon="el-icon-folder-add" class="div1" slot="trigger">导入</el-button>-->
<!--                                    </el-upload>-->

                                    <el-select value="" placeholder="操作" style="width: 100px;margin-left: 10px;">
                                        <el-option value="4" style="height: 35px"><span @click="exportExcels">导出</span></el-option>
                                        <el-option value="1" style="height: 35px">
                                            <el-upload ref="upload" action="/" :show-file-list="false" :on-change="importExcel" :auto-upload="false">
                                            <span>导入</span></el-upload></el-option>
                                    </el-select>


                                    <span style="margin-left: 307px;">
                                        <i @click="showtablecol" style="position: absolute;font-size: 22px;top: 7px;"
                                           class="el-icon-s-grid"/></span>
                                </el-col>
                                <!--动态选择表格列-->
                                <el-dialog width="800px"  :before-close="handleDialogClose" center :close-on-click-modal=false
                                           style="text-align: left" title="选择表格列" :visible.sync="jilutankuan">
                                    <div style="height:230px;margin-left: 25px;margin-top: 20px" >
                                        <el-row>
                                            <el-col :span="2">
                                                <span>选择：</span>
                                            </el-col>
                                            <el-col :span="22">
                                                <el-checkbox-group v-model="colOptions">
                                                    <el-checkbox v-for="item in colSelect"
                                                                 :label="item"
                                                                 v-bind:disabled="item=='客户名称'"
                                                                 :key="item">
                                                        <span>{{item}}</span>
                                                    </el-checkbox>
                                                </el-checkbox-group>
                                            </el-col>
                                        </el-row>
                                        <el-row style="margin-top: 60px">
                                            <el-col :span="2">
                                                <span>注意：</span>
                                            </el-col>
                                            <el-col :span="11">
                                                <span>选择列最多不超过八列，最少不低于五列</span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col style="margin-left: 540px;margin-top: 50px">
                                                <span>已选择：</span>
                                                <span>{{colcount}}</span>
                                                <span>列</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div style="width: 170px;margin-top: 5px;margin-left: 560px;">
                                        <el-button type="primary" @click="savetablecol">保存</el-button>
                                        <el-button @click="distablecol" class="el-icon-back">返回</el-button>
                                    </div>
                                </el-dialog>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                        <div style="border: 1px solid #BFBFBF;background-color: white; height: 450px;">
                            <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                                <div class="operate" v-show="cjy">
                                    <div class="selected—title" style="border-right: 1px; width: 200px; ">
                                        场景：<span>{{value7}}</span>
                                    </div>
                                </div>
                                <div class="operate" v-show="cje">
                                    <div class="selected—title">
                                        已选中<span class="selected—count">{{count}}</span>项
                                    </div>
                                    <div @click="zyff" class="selected—title1">
                                        <span><i class="el-icon-top-right"></i>转移</span>
                                    </div>
                                    <el-form :model="clients" ref="clients">
                                        <el-dialog title="客户转移" :visible.sync="dialogFormVisible">
                                            <el-input clearable @keyup.enter.native="initDatatk" v-model="empinput" class="tk"
                                                      style="width: 310px; margin-left: 100px; margin-bottom: 10px;">
                                                <i slot="suffix" class="el-input__icon el-icon-search" @click="initDatatk()"></i>
                                            </el-input>
                                            <span style="margin-left:-410px;">变更负责人为:</span>
                                            <el-input placeholder="+添加" v-model="clients.empId.empName"
                                                      style="margin-left:10px;width:150px;" :readonly='true'></el-input>
                                            <div slot="footer" style="margin-top: -30px">
                                                <el-table highlight-current-row border ref="emplist" :data="emplist">
                                                    <el-table-column width="100" align="center" property="empId" label="ID"></el-table-column>
                                                    <el-table-column width="270" label="姓名">
                                                        <template slot-scope="sp">
                                                            <a v-html="sp.row.empName" class="businame" @click="emptodetails(sp.row)"></a>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column width="300" property="depId.depName" label="部门"></el-table-column>
                                                </el-table>
                                                <el-pagination @size-change="handleSizeChangetk" @current-change="changePagetk"
                                                               :current-page.sync="currPagetk" :page-size="pageSizetk"
                                                               layout="total, prev, pager, next" :total="totalSizetk" style="margin-right: 300px;">
                                                </el-pagination>
                                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                                <el-button type="primary" @click="addClient">确 定</el-button>
                                            </div>
                                        </el-dialog>
                                    </el-form>
                                    <div @click="jgzclient" class="selected—title1" >
                                        <span><i class="el-icon-circle-check"></i>加关注</span>
                                    </div>
                                    <div @click="xzlxr" class="selected—title2" >
                                        <span><i class="el-icon-user"></i>新增联系人</span>
                                    </div>
                                    <div @click="hbkhlist" class="selected—title2">
                                        <span><i class="el-icon-connection"></i>合并客户</span>
                                    </div>
                                    <el-form :model="clients" ref="clients">
                                        <el-dialog title="合并客户" :visible.sync="hbtankuang">
                                            <div style="width: 1100px; height: 450px; margin-top: -35px;">
                                                <div style="background-color: #f5f6f9; width: 710px; height: 120px;padding-top: 1px;padding-left: 10px;">
                                                    <p>1.合并后，将会产生一个新客户，原客户被删除进入回收站</p>
                                                    <p>2.新客户包含原客户的联系人、联系提醒、商机、合同、订单、回款计划、
                                                        退货、换货、交付计划、出库、交付记录、发票、回款记录、入库、客户服务、
                                                        客户投诉、维修工单</p>
                                                    <p>3.请选择以下客户信息来设置新客户的基本信息</p>
                                                </div>
                                                <div class="table_sty">
                                                    <el-form :model="hblist">
                                                    <table border="1" style="width: 100%">
                                                        <tr>
                                                            <th align="left"></th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-col :span="12">
                                                                    {{this.myclientcount[0].clientName}}
                                                                    [<a class="qxkh1" name="delAll" @click="checkAll(0)">全选</a>]
                                                                </el-col>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-col :span="12">
                                                                    {{this.myclientcount[1].clientName}}
                                                                    [<a class="qxkh1" name="delAll" @click="checkAll(1)">全选</a>]
                                                                </el-col>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">名称</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cname" >
                                                                    <el-radio v-model="hblist.clientName" :label="this.myclientcount[0].clientName">
                                                                        {{this.myclientcount[0].clientName}}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cname" >
                                                                    <el-radio v-model="hblist.clientName" :label="this.myclientcount[1].clientName">
                                                                        {{this.myclientcount[1].clientName}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr><tr>
                                                        <th align="left">负责人</th>
                                                        <th align="left" style="border-right: 0px;border-left: 0px;">
                                                            <el-radio-group v-model="hblist.emp" >
                                                                <el-radio v-model="hblist.empId" :label="this.myclientcount[0].empId">
                                                                    {{this.myclientcount[0].empId.empName}}
                                                                </el-radio>
                                                            </el-radio-group>
                                                        </th>
                                                        <th align="left" style="border-right: 0px;border-left: 0px;">
                                                            <el-radio-group v-model="hblist.emp" >
                                                                <el-radio v-model="hblist.empId" :label="this.myclientcount[1].empId">
                                                                    {{this.myclientcount[1].empId.empName}}
                                                                </el-radio>
                                                            </el-radio-group>
                                                        </th>
                                                    </tr>
                                                        <tr>
                                                            <th align="left">客户行业</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.chy" >
                                                                    <el-radio v-model="hblist.clientIndustry" :label="this.myclientcount[0].clientIndustry">
                                                                        {{this.myclientcount[0].clientIndustry}}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.chy" >
                                                                    <el-radio v-model="hblist.clientIndustry" :label="this.myclientcount[1].clientIndustry">
                                                                        {{this.myclientcount[1].clientIndustry}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">客户来源</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cly" >
                                                                <el-radio v-model="hblist.clientSource" :label="this.myclientcount[0].clientSource">
                                                                    {{this.myclientcount[0].clientSource}}
                                                                </el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cly" >
                                                                <el-radio v-model="hblist.clientSource" :label="this.myclientcount[1].clientSource">
                                                                    {{this.myclientcount[1].clientSource}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">电话</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cdh" >
                                                                <el-radio v-model="hblist.clientPhone" :label="this.myclientcount[0].clientPhone">
                                                                {{this.myclientcount[0].clientPhone}}
                                                                </el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cdh" >
                                                                <el-radio v-model="hblist.clientPhone" :label="this.myclientcount[1].clientPhone">
                                                                    {{this.myclientcount[1].clientPhone}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">手机</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.csj" >
                                                                <el-radio v-model="hblist.clientMobile" :label="this.myclientcount[0].clientMobile">
                                                                    {{this.myclientcount[0].clientMobile}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.csj" >
                                                                <el-radio v-model="hblist.clientMobile" :label="this.myclientcount[1].clientMobile">
                                                                    {{this.myclientcount[1].clientMobile}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr >
                                                            <th align="left">网址</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cwz" >
                                                                <el-radio v-model="hblist.clientUrl" :label="this.myclientcount[0].clientUrl">
                                                                    {{this.myclientcount[0].clientUrl}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cwz" >
                                                                <el-radio v-model="hblist.clientUrl" :label="this.myclientcount[1].clientUrl">
                                                                    {{this.myclientcount[1].clientUrl}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">客户级别</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cjb" >
                                                                <el-radio v-model="hblist.clientRank" :label="this.myclientcount[0].clientRank">
                                                                    {{this.myclientcount[0].clientRank}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cjb" >
                                                                <el-radio v-model="hblist.clientRank" :label="this.myclientcount[1].clientRank">
                                                                    {{this.myclientcount[1].clientRank}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">地址</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cdz" >
                                                                <el-radio v-model="hblist.clientSite" :label="this.myclientcount[0].clientSite">
                                                                    {{this.myclientcount[0].clientSite}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cdz" >
                                                                <el-radio  v-model="hblist.clientSite" :label="this.myclientcount[1].clientSite">
                                                                    {{this.myclientcount[1].clientSite}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                        <tr>
                                                            <th align="left">备注</th>
                                                            <th align="left" style="border-right: 0px;border-left: 0px;">
                                                                <el-radio-group v-model="hblist.cbz" >
                                                                <el-radio v-model="hblist.clientRemark" :label="this.myclientcount[0].clientRemark">
                                                                    {{this.myclientcount[0].clientRemark}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                            <th align="left" class="hang" style="border-right: 0px;border-left: 0px;" >
                                                                <el-radio-group v-model="hblist.cbz" >
                                                                <el-radio  v-model="hblist.clientRemark" :label="this.myclientcount[1].clientRemark">
                                                                    {{this.myclientcount[1].clientRemark}}</el-radio>
                                                                </el-radio-group>
                                                            </th>
                                                        </tr>
                                                    </table>
                                                    </el-form>
                                                </div>
                                            </div>
                                            <el-button @click="hbtankuang = false">取 消</el-button>
                                            <el-button type="primary" @click="hebing">合 并</el-button>
                                        </el-dialog>
                                    </el-form>
                                    <div @click="exportExcelpl" class="selected—title2" >
                                        <span><i class="el-icon-upload2"></i>导出选中</span>
                                    </div>
                                    <div @click="truedetbus" class="selected—title1">
                                        <span><i class="el-icon-delete"></i>删除</span>
                                    </div>
                                </div>
                            </div>
<!--                            "ID","客户名称","客户级别","客户行业","客户来源","网址","负责人","创建时间","下次联系时间","电话",-->
<!--                            "手机","地址","详细地址","备注"-->
                                <el-table id="tableids" ref="clientList" :data="clientList" tooltip-effect="dark"
                                          @selection-change="handleSelectionChange" height="410px">
                                    <el-table-column type="selection" prop="clientId" align="center"></el-table-column>
                                    <el-table-column v-if="colData[0].istrue" sortable prop="clientId" label="ID">
                                    </el-table-column>
                                    <el-table-column v-if="colData[1].istrue" label="客户名称">
                                        <template slot-scope="sp">
                                            <a v-html="sp.row.clientName" class="businame" @click="todetails(sp.row)"></a>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[2].istrue" prop="clientRank" label="客户级别">
                                    </el-table-column>
                                    <el-table-column v-if="colData[3].istrue" prop="clientIndustry" label="客户行业">
                                    </el-table-column>
                                    <el-table-column v-if="colData[4].istrue" prop="clientSource" label="客户来源">
                                    </el-table-column>
                                    <el-table-column v-if="colData[5].istrue" prop="clientUrl" label="网址">
                                    </el-table-column>
                                    <el-table-column v-if="colData[6].istrue" prop="empId.empName" label="负责人">
                                    </el-table-column>
                                    <el-table-column v-if="colData[7].istrue" sortable prop="establishTime" label="创建时间" width="150">
                                        <template slot-scope="p">
                                            {{p.row.establishTime | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[8].istrue" sortable prop="establishPerson" label="下次联系时间" width="150">
                                        <template slot-scope="p">
                                            {{p.row.establishPerson | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="colData[9].istrue" prop="clientPhone" label="电话">
                                    </el-table-column>
                                    <el-table-column v-if="colData[10].istrue" prop="clientMobile" label="手机">
                                    </el-table-column>
                                    <el-table-column v-if="colData[11].istrue" prop="clientSite" label="地址" width="280">
                                    </el-table-column>
                                    <el-table-column v-if="colData[12].istrue" prop="clientSitexq" label="详细地址">
                                    </el-table-column>
                                    <el-table-column v-if="colData[13].istrue" prop="clientRemark" label="备注">
                                    </el-table-column>
                                    <el-table-column label="操作" align="center" width="100">
                                        <template slot-scope="p">
                                            <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                            <i style="font-size:18px;color: #409EFF" class="el-icon-edit" @click="xgclient(p.row)"></i>
                                            <i style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-circle-check"
                                               @click="dhjgzclient(p.row)"></i>
                                            <i style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-delete"
                                               @click="scclient(p.row)"></i>
                                        </template>
                                    </el-table-column>
                                </el-table>
                        </div>
                        <!--分页框-->
                        <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                            <div style="text-align: center">
                                <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="currPage" :page-sizes="sizes"
                                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize" >
                                </el-pagination>
                            </div>
                        </div>
                </el-main>
            </el-container>
        </el-tab-pane>
        <el-tab-pane label="我关注的客户" name="er">
            <!--收起选项卡-->
            <el-container>
                <el-header style="height: 60px;margin-align:left;">
                    <!--最大div-->
                    <div style="margin-top: -10px">
                        <!--新建栏-->
                        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="3">
                                    <span style="font-size: 19px;line-height:40px;margin-left: 5px">我关注的客户</span>
                                </el-col>
                                <el-col :span="6">
                                    <span>场景：</span>
                                    <el-select v-model="valuegz" style="width: 150px;" placeholder="请选择">
                                        <el-option
                                                v-for="item in optionsgz" :key="item.xzgz"
                                                :label="item.labelgz" :value="item.xzgz">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input clearable placeholder="请输入客户名称/手机/电话" v-model="inputgz" @keyup.enter.native="initDatagz" style="width: 250px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" @click="initDatagz"></i>
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                   <el-button size="medium" icon="el-icon-folder-remove" style="margin-left: 240px;">导出</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <div style="border: 1px solid #BFBFBF;background-color: white">
                        <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                            <div class="operate" v-show="cjygz">
                                <div class="selected—title" style="border-right: 1px; width: 200px; ">
                                    场景：<span>{{valuegz}}</span>
                                </div>
                            </div>
                            <div class="operate" v-show="cjegz">
                                <div class="selected—title">
                                    已选中<span class="selected—count">{{countgz}}</span>项
                                </div>
                                <div class="selected—title1">
                                    <span><i class="el-icon-top-right"></i>转移</span>
                                </div>
                                <div @click="ygzclient" class="selected—title2" >
                                    <span><i class="el-icon-remove-outline"></i>取消关注</span>
                                </div>
                                <div class="selected—title2" >
                                    <span><i class="el-icon-upload2"></i>导出选中</span>
                                </div>
                                <div class="selected—title1">
                                    <span><i class="el-icon-delete"></i>删除</span>
                                </div>
                            </div>
                        </div>
                        <el-table id="tableider" ref="clientgzList" height="410px"
                                  :data="clientgzList" tooltip-effect="dark" @selection-change="handleSelectionChangegz">
                            <el-table-column type="selection" prop="clientId" width="55" align="center"> </el-table-column>
                            <el-table-column sortable prop="clientId" label="ID" width="70">
                            </el-table-column>
                            <el-table-column label="客户名称" width="120">
                                <template slot-scope="sp">
                                    <a v-html="sp.row.clientName" class="businame" @click="todetails(sp.row)"></a>
                                </template>
                            </el-table-column>
                            <el-table-column prop="clientRank" label="客户级别" width="120">
                            </el-table-column>
                            <el-table-column prop="empId.empName" label="负责人" width="100">
                            </el-table-column>
                            <el-table-column sortable prop="establishTime" label="创建时间" width="150">
                                <template slot-scope="p">
                                    {{p.row.establishTime | formatDate}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="clientPhone" label="电话" width="120">
                            </el-table-column>
                            <el-table-column prop="clientSite" label="地址" width="280">
                            </el-table-column>
                            <el-table-column prop="clientRemark" label="备注" width="110">
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="100">
                                <template slot-scope="p">
                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                    <i style="font-size:18px;color: #409EFF" class="el-icon-edit" @click="xgclient(p.row)"></i>
                                    <i style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-remove-outline"
                                       @click="dhygzclient(p.row)"></i>
                                    <i style="font-size:18px;padding-left: 10px;color: #409EFF" class="el-icon-delete"
                                       @click="scclient(p.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--分页框-->
                    <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                        <div style="text-align: center">
                            <el-pagination @size-change="handleSizeChangegz" @current-change="changePagegz" :current-page.sync="currPagegz" :page-sizes="sizesgz"
                                           :page-size="pageSizegz" layout="total, sizes, prev, pager, next, jumper" :total="totalSizegz" >
                            </el-pagination>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-tab-pane>
        <el-tab-pane label="已失效客户" name="second">
            <!--收起选项卡-->
            <el-container>
                <el-header style="height: 60px;margin-align:left;">
                    <!--最大div-->
                    <div style="margin-top: -10px">
                        <!--新建栏-->
                        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="3">
                                    <span style="font-size: 19px;line-height:40px;margin-left: 5px">已失效客户</span>
                                </el-col>
                                <el-col :span="6">
                                    <span>场景：</span>
                                    <el-select v-model="value7zt" style="width: 150px;" placeholder="请选择">
                                        <el-option
                                                v-for="item in optionszt" :key="item.xzzt"
                                                :label="item.labelzt" :value="item.xzzt">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input clearable placeholder="请输入客户名称/手机/电话" v-model="input3zt" @keyup.enter.native="initDatazt" style="width: 250px;">
                                        <i slot="suffix" class="el-input__icon el-icon-search" @click="initDatazt"></i>
                                    </el-input>
                                </el-col>
                                <el-col :span="7">
                                    <el-button size="medium" @click="exportExcel" icon="el-icon-folder-remove" style="margin-left: 240px;">导出</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <div style="border: 1px solid #BFBFBF;background-color: white">
                        <div style="width: 100%;height: 40px;background-color: white;border-bottom: 1px solid #EBEEF5">
                            <div class="operate" v-show="cjyzt">
                                <div class="selected—title" style="border-right: 1px; width: 200px; ">
                                    场景：<span>{{value7zt}}</span>
                                </div>
                            </div>
                            <div class="operate" v-show="cjezt">
                                <div class="selected—title">
                                    已选中<span class="selected—count">{{countzt}}</span>项
                                </div>
                                <div class="selected—title1">
                                    <span><i class="el-icon-top-right"></i>转移</span>
                                </div>
                                <div class="selected—title2">
                                    <span><i class="el-icon-edit-outline"></i>更改成交状态</span>
                                </div>
                                <div @click="exportExcelpl2" class="selected—title2" >
                                    <span><i class="el-icon-upload2"></i>导出选中</span>
                                </div>
                                <div @click="wlscclients" class="selected—title1">
                                    <span><i class="el-icon-delete"></i>删除</span>
                                </div>
                                <div @click="plclient" class="selected—title1">
                                    <span><i class="el-icon-refresh"></i>恢复</span>
                                </div>
                            </div>
                        </div>
                        <el-table id="tableid" ref="clientztList" height="410px"
                                  :data="clientztList" tooltip-effect="dark" @selection-change="handleSelectionChangezt">
                            <el-table-column type="selection" prop="clientId" width="55" align="center"> </el-table-column>
                            <el-table-column sortable prop="clientId" label="ID" width="70">
                            </el-table-column>
                            <el-table-column label="客户名称" width="120">
                                <template slot-scope="sp">
                                    <a v-html="sp.row.clientName" class="businame" @click="todetails(sp.row)"></a>
                                </template>
                            </el-table-column>
                            <el-table-column prop="clientRank" label="客户级别" width="120">
                            </el-table-column>
                            <el-table-column prop="empId.empName" label="负责人" width="100">
                            </el-table-column>
                            <el-table-column sortable prop="establishTime" label="创建时间" width="150">
                                <template slot-scope="p">
                                    {{p.row.establishTime | formatDate}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="clientPhone" label="电话" width="120">
                            </el-table-column>
                            <el-table-column prop="clientSite" label="地址" width="280">
                            </el-table-column>
                            <el-table-column prop="clientRemark" label="备注" width="110">
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="100">
                                <template slot-scope="p">
                                    <!--如果是三个标签，后两个标签padding-left: 10px;-->
                                    <i style="font-size:18px;color: #409EFF" class="el-icon-refresh"
                                       @click="hfclient(p.row)"></i>
                                    <i style="font-size:18px;padding-left: 20px;color: #409EFF" class="el-icon-delete"
                                       @click="sckh(p.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--分页框-->
                    <div style="margin-top: 15px;border: 1px solid #BFBFBF;padding: 10px;background-color: white">
                        <div style="text-align: center">
                            <el-pagination @size-change="handleSizeChangezt" @current-change="changePage1" :current-page.sync="currPagezt" :page-sizes="sizeszt"
                                           :page-size="pageSizezt" layout="total, sizes, prev, pager, next, jumper" :total="totalSizezt" >
                            </el-pagination>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js';
    import Crypto  from '../router//secret.js'
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'

    export default {
        name: "TfyClientPage",
        data() {
            return {
                xsgj:[],
                seek:false,//解除搜索是否显示
                colsize:7,//记录前一次表格列是多少个
                colarr:[],//记录前一次的表格列是哪些jilutankuan: false,
                jilutankuan: false,
                /*表格列数据*/
                colSelect: [
                    "ID","客户名称","客户级别","客户行业","客户来源","网址","负责人","创建时间","下次联系时间","电话",
                    "手机","地址","详细地址","备注"
                ],//选项
                colOptions: [
                    "ID","客户名称","客户级别","负责人","下次联系时间","手机","地址"
                ], //默认选择

                /*动态显示表格列*/
                colData:[
                    {title: "ID",istrue: true},
                    {title: "客户名称",istrue: true},
                    {title: "客户级别",istrue: true},
                    {title: "客户行业",istrue: false},
                    {title: "客户来源",istrue: false},
                    {title: "网址",istrue: false},
                    {title: "负责人",istrue: true},
                    {title: "创建时间",istrue: true},
                    {title: "下次联系时间",istrue: false},
                    {title: "电话",istrue: false},
                    {title: "手机",istrue: true},
                    {title: "地址",istrue: true},
                    {title: "详细地址",istrue: false},
                    {title: "备注",istrue: false},
                ],
                /*列表表头信息*/
                tableInfo:[
                    {name:'ID', value:'clientId',},
                    {name:'客户名称', value:'clientName',},
                    {name:'客户级别', value:'clientRank'},
                    {name:'客户行业', value:'clientIndustry'},
                    {name:'客户来源', value:'clientSource',},
                    {name:'网址', value:'clientUrl'},
                    {name:'负责人', value:'empId',},
                    {name:'创建时间', value:'establishTime',},
                    {name:'下次联系时间', value:'establishPerson',},
                    {name:'电话', value:'clientPhone',},
                    {name:'手机', value:'clientMobile',},
                    {name:'地址', value:'clientSite',},
                    {name:'详细地址', value:'clientSitexq',},
                    {name:'备注', value:'clientRemark',},
                ],
                myclientcount:[{
                    clientId:0,
                    updateTime:null,
                    clientIndustry:null,
                    clientSource:null,
                    clientUrl:null,
                    establishPerson:null,
                    establishTime:null,
                    clientName:null,
                    clientRank:null,
                    clientPhone:null,
                    clientMobile:null,
                    clientSite:null,
                    clientRemark:null,
                    clientPeople:null,
                    clientCjpeople:null,
                    clientState:1,
                    clientIffollowup:0,
                    clientSheng:null,
                    clientSz:null,
                    empId:{
                        empId:0,
                        depId:null,
                        empName:null,
                        empGender:null,
                        empPhone:null,
                        empAdd:null,
                        empSfz:null,
                        empSalary:null,
                        empService:null,
                        empMima:null,
                        roleId:0,
                        empUpposition:null
                    },
                    clientPayattention:null,
                    operationId:null,
                    relationwarnId:null,
                },
                    {
                        clientId:0,
                        updateTime:null,
                        clientIndustry:null,
                        clientSource:null,
                        clientUrl:null,
                        establishPerson:null,
                        establishTime:null,
                        clientName:null,
                        clientRank:null,
                        clientPhone:null,
                        clientMobile:null,
                        clientSite:null,
                        clientRemark:null,
                        clientPeople:null,
                        clientCjpeople:null,
                        clientState:1,
                        clientIffollowup:0,
                        clientSheng:null,
                        clientSz:null,
                        empId:{
                            empId:0,
                            depId:null,
                            empName:null,
                            empGender:null,
                            empPhone:null,
                            empAdd:null,
                            empSfz:null,
                            empSalary:null,
                            empService:null,
                            empMima:null,
                            roleId:0,
                            empUpposition:null
                        },
                        clientPayattention:null,
                        operationId:null,
                        relationwarnId:null,
                    }
                    ],//我的客户合并数组

                xlsxJson:[],
                dialogTableVisible: false,
                dialogFormVisible: false,
                hbtankuang:false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',

                activeName: 'first',//标签页
                clientList: [],//客户
                clientzy:{
                        clientId:0,
                        updateTime:null,
                        clientIndustry:null,
                        clientSource:null,
                        clientUrl:null,
                        establishPerson:null,
                        establishTime:null,
                        clientName:null,
                        clientRank:null,
                        clientPhone:null,
                        clientMobile:null,
                        clientSite:null,
                        clientRemark:null,
                        clientPeople:null,
                        clientCjpeople:null,
                        clientState:1,
                        clientIffollowup:0,
                        clientSheng:null,
                        clientSz:null,
                        empId:{
                            empId:0,
                            depId:null,
                            empName:null,
                            empGender:null,
                            empPhone:null,
                            empAdd:null,
                            empSfz:null,
                            empSalary:null,
                            empService:null,
                            empMima:null,
                            roleId:0,
                            empUpposition:null
                        },
                        clientPayattention:null,
                        operationId:null,
                        relationwarnId:null,
                    },
                clientztList: [],//失效客户
                clientgzList:[],//已关注客户
                hblist:{
                    updateTime:null,
                    chy:null,
                    cly:null,
                    cwz:null,
                    establishPerson:null,
                    establishTime:null,
                    cname:null,
                    cjb:null,
                    csj:null,
                    cdh:null,
                    cdz:null,
                    cbz:null,
                    clientPeople:null,
                    clientCjpeople:null,
                    clientState:1,
                    clientIffollowup:0,
                    clientSheng:null,
                    clientSz:null,
                    clientSitexq:null,
                    emp:{
                        empId:0,
                        depId:null,
                        empName:null,
                        empGender:null,
                        empPhone:null,
                        empAdd:null,
                        empSfz:null,
                        empSalary:null,
                        empService:null,
                        empMima:null,
                        roleId:0,
                        empUpposition:null
                    },
                    clientPayattention:null,
                    operationId:null,
                    relationwarnId:null,
                },
                multipleTable: [],//存放选中值的数组
                multipleTablezt: [],//存放选中值的数组2
                multipleTablegz: [],//存放选中值的数组3
                //场景一
                cjy:true,
                //场景二
                cje:false,
                value7: '',
                input3: '',
                input3zt: '',
                options: [{
                    xz: '潜在客户',
                    label: '潜在客户'
                }, {
                    xz: '签约客户',
                    label: '签约客户'
                }, {
                    xz: '重复购买',
                    label: '重复购买'
                }],
                xz: '',
                select: '',
                //页数
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                sizes:[5, 10, 15, 20],
                inputgz:'',
                valuegz: '',
                //场景一
                cjygz: true,
                //场景二
                cjegz: false,
                optionsgz: [{
                    xzgz: '我负责的客户',
                    labelgz: '我负责的客户'
                }, {
                    xzgz: '属下负责的客户',
                    labelgz: '属下负责的客户'
                }, {
                    xzgz: '已转化的客户',
                    labelgz: '已转化的客户'
                }, {
                    xzgz: '全部客户',
                    labelgz: '全部客户'
                }],
                xzgz: '',
                //页数2
                pageSizegz:5,//分页页大小
                currPagegz:1,//当前页码，默认为1
                totalSizegz:0,//总记录数
                sizesgz:[5, 10, 15, 20],
                value7zt: '',
                //场景一
                cjyzt: true,
                //场景二
                cjezt: false,
                optionszt: [{
                    xzzt: '我负责的客户',
                    labelzt: '我负责的客户'
                }, {
                    xzzt: '属下负责的客户',
                    labelzt: '属下负责的客户'
                }, {
                    xzzt: '已转化的客户',
                    labelzt: '已转化的客户'
                }, {
                    xzzt: '全部客户',
                    labelzt: '全部客户'
                }],
                xzzt: '',
                //页数2
                pageSizezt:5,//分页页大小
                currPagezt:1,//当前页码，默认为1
                totalSizezt:0,//总记录数
                sizeszt:[5, 10, 15, 20],
                //表格滚动条高度:max-height="tableHeight"
                tableHeight2: 1120,
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                clients:{//客户
                    clientId:0,
                    empId:{//员工表
                        empId:0,
                        empName:'',
                        depId:{//部门
                            depId:0,
                            depName:'',
                        },
                    }
                },
                empinput:'',//员工弹框搜索框
                emplist:[],//员工表格信息
                pageSizetk:5,//员工分页页大小
                currPagetk:1,//员工当前页码，默认为1
                totalSizetk:0,//员工总记录数
                table:[],
                khid:0,
                emp:{
                    clientId:0,
                    empId:{//员工表
                        empId:0,
                        empName:'',
                        depId:{//部门
                            depId:0,
                            depName:'',
                        },
                    }
                },
                clientsid:0,
            }
        },
        methods: {
            changebusni2(){
                if(this.xsgj!=''){
                    this.seek=true;
                }
                this.initData(this.currPage2, this.pageSize2,this.xsgj);
            },
            /*解除选择类型客户状态方法*/
            cancelseek(){
                this.xsgj='';
                this.seek=false;
                this.initData(this.currPage2, this.pageSize2,this.xsgj);
            },
            /**点击 自定义表格列 关闭对话框的回调**/
            handleDialogClose() {
                this.distablecol();
            },
            /*编辑显示表格列*/
            showtablecol(){
                this.jilutankuan=true;
                this.colsize = this.colOptions.length;
                this.colarr = this.colOptions;
            },
            /*选择列返回放法*/
            distablecol(){
                if(this.colsize!=this.colOptions.length){
                    this.$confirm('此操作将未保存, 是否返回?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var a = this.colOptions.length-this.colsize;
                        window.console.log(a);
                        if(a>0){
                            for(var i=this.colOptions.length-1;i>=this.colsize;i--) {
                                this.colOptions.splice(i, 1);
                            }
                        }else{
                            this.colOptions = this.colarr;
                        }

                        this.jilutankuan=false;
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }else{
                    this.jilutankuan=false;
                }
            },
            /*表格与选择列呼应方法*/
            arrcol(valArr){
                var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
                this.colData.filter(i => {
                    if (arr.indexOf(i.title) != -1) {
                        i.istrue = false;
                    } else {
                        i.istrue = true;
                    }
                });
            },
            /*选择列保存方法*/
            savetablecol(){
                window.console.log(this.colOptions.length);
                if(this.colOptions.length>8){
                    this.$message({
                        showClose: true,
                        message: '选择列超过八条！',
                        type: 'warning'
                    });
                }else if(this.colOptions.length<5){
                    this.$message({
                        showClose: true,
                        message: '选择列低于五条！',
                        type: 'warning'
                    });
                }else {
                    this.jilutankuan=false;
                    this.arrcol(this.colOptions);
                }
            },
            hebing(){//合并
                window.console.log("id:"+this.myclientcount[0].clientId)
                window.console.log("id:"+this.myclientcount[1].clientId)
                var khlist ={};
                this.$set(khlist,'clientId',0);
                this.$set(khlist,'updateTime',this.hblist.updateTime);
                this.$set(khlist,'clientIndustry',this.hblist.chy);
                this.$set(khlist,'clientSource',this.hblist.cly);
                this.$set(khlist,'clientUrl',this.hblist.cwz);
                this.$set(khlist,'establishPerson',this.hblist.establishPerson);
                this.$set(khlist,'establishTime',this.hblist.establishTime);
                this.$set(khlist,'clientName',this.hblist.cname);
                this.$set(khlist,'clientRank',this.hblist.cjb);
                this.$set(khlist,'clientPhone',this.hblist.cdh);
                this.$set(khlist,'clientMobile',this.hblist.csj);
                this.$set(khlist,'clientSite',this.hblist.cdz);
                this.$set(khlist,'clientSitexq',this.hblist.clientSitexq);
                this.$set(khlist,'clientRemark',this.hblist.cbz);
                this.$set(khlist,'clientState',1);
                this.$set(khlist,'clientSheng',this.hblist.clientSheng);
                this.$set(khlist,'clientSz',this.hblist.clientSz);
                this.$set(khlist,'empId',this.hblist.emp);
                this.$set(khlist,'clientPayattention','加关注');
                var busform=JSON.stringify({khdxlist:khlist,id1:this.myclientcount[0].clientId,id2:this.myclientcount[1].clientId})
                window.console.log("bus:"+busform)
                this.$axios.post("http://localhost:8088/clienthb-list",this.qs.stringify(
                    {busform:busform}))
                    .then(()=>{
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '合并成功!',
                        });
                        this.hbtankuang = false;
                        this.initData();
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '合并失败',
                            type: 'error'
                        });
                    })
            },
            quanx(){
            },
            hbkhlist(){
                if(this.multipleTable.length < 2 || this.multipleTable.length > 2){
                    this.$message({
                        showClose: true,
                        message: '需要选择两位客户才能合并',
                        type: 'error'
                    });
                }else if(this.multipleTable[0].clientIndustry == this.multipleTable[1].clientIndustry){
                    this.hbtankuang = true;
                    this.myclientcount = this.multipleTable;
                    this.checkAll(0);//全选一列
                    this.multipleTable.forEach(a=>{
                        window.console.log("a:"+a.empId.empName);
                    });
                    window.console.log("列表："+this.multipleTable)
                } else{
                    this.$message({
                        showClose: true,
                        message: '需要同行业的客户才能合并',
                        type: 'error'
                    });
                }
            },
            //新增联系人
            xzlxr(rows) {
                window.console.log(this.multipleTable.length)
                if(this.multipleTable.length == 1){
                    var arr=this.multipleTable;
                    let multis = [];
                    for (var i=0;i<arr.length;i++){
                        multis.push(arr[i].clientId);
                        console.log(multis)
                        window.console.log("khid:"+arr[i].clientId)
                        rows = arr[i].clientId;
                    }
                    window.console.log("row:"+rows)
                    this.$router.push({//跳联系人页面
                        path:'/xjlxr',
                        query: {
                            row:rows,
                        }
                    });
                }else if(this.multipleTable.length > 1){
                    this.$message({
                        showClose: true,
                        message: '请勾选一位客户，再进行操作',
                        type: 'error'
                    });
                }
            },
            exportExcel (){
                var fix = document.querySelector('.el-table__fixed');
                var wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#tableid').removeChild(fix));
                    document.querySelector('#tableid').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableid"));
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                        "客户导出.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            exportExcels () {
                var fix = document.querySelector('.el-table__fixed');
                var wb;
                if(fix){ //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
                    wb = XLSX.utils.table_to_book(document.querySelector('#tableids').removeChild(fix));
                    document.querySelector('#tableids').appendChild(fix);
                }else{
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableids"));
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
                        "客户导出.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
            //批量导出的方法
            exportExcelpl() {
                this.table = [];
                this.multipleTable.forEach((item,i)=>{
                    this.$set(item,'empName',item.empId.empName);
                    this.table.splice(i,0,item);
                    this.$set(item,'establishTime',formatTimeToStr(item.establishTime, 'yyyy-MM-dd hh:mm:ss'));
                });
                require.ensure([], () => {
                    const {export_json_to_excel} = require('../assets/Export2Excel')
                    const tHeader = ['ID', '客户名称', '客户级别','负责人','创建时间', '手机', '地址','备注'];
                    // 上面设置Excel的表格第一行的标题
                    const filterVal = ['clientId', 'clientName', 'clientRank','empName','establishTime','clientMobile','clientSite','clientRemark'];
                    // 上面的index、nickName、name是tableData里对象的属性
                    const list = this.table;  //把data里的tableData存到list
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '客户列表excel');
                })
                this.initData();
            },
            //批量导出的方法2
            exportExcelpl2() {
                this.table = [];
                this.multipleTablezt.forEach((item,i)=>{
                    this.$set(item,'empName',item.empId.empName);
                    this.table.splice(i,0,item);
                    this.$set(item,'establishTime',formatTimeToStr(item.establishTime, 'yyyy-MM-dd hh:mm:ss'));
                });
                require.ensure([], () => {
                    const {export_json_to_excel} = require('../assets/Export2Excel')
                    const tHeader = ['ID', '客户名称', '客户级别','负责人','创建时间', '手机', '地址','备注'];
                    // 上面设置Excel的表格第一行的标题
                    const filterVal = ['clientId', 'clientName', 'clientRank','empName','establishTime','clientMobile','clientSite','clientRemark'];
                    // 上面的index、nickName、name是tableData里对象的属性
                    const list = this.table;  //把data里的tableData存到list
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '失效客户列表excel');
                })
                this.initDatazt();
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

            //导入
            importExcel(file) {
                // let file = file.files[0] // 使用传统的input方法需要加上这一步
                const types = file.name.split('.')[1]
                const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
                if (!fileType) {
                    alert('格式错误！请重新选择')
                    return
                }
                this.file2Xce(file).then(tabJson => {
                    if (tabJson && tabJson.length > 0) {
                        this.xlsxJson = tabJson
                        this.xlsxJson[0].sheet.forEach(v=>{
                            var fzr = this.emp.empId;
                            fzr.empId=v.负责人;
                            var kh = {
                                clientId:0, clientName:v.客户名称, empId:fzr,
                                clientMobile:v.手机,clientPhone:v.电话, clientUrl:v.网址
                            }
                            if(kh.clientName == null) {
                                this.$message({
                                    message: '客户名称不能为空，验证不通过！',
                                    type: 'warning'
                                });
                            }else if(fzr == null){
                                this.$message({
                                    message: '负责人不能为空，验证不通过！',
                                    type: 'warning'
                                });
                            }else if(kh.clientMobile == null){
                                this.$message({
                                    message: '手机不能为空，验证不通过！',
                                    type: 'warning'
                                });
                            } else{
                                this.$axios.post("http://localhost:8088/addclient-list",kh)
                                        .then(v=>{
                                            if(v.data != 0) {
                                                this.$message({
                                                    showClose: true,
                                                    type: 'success',
                                                    message: '导入成功!',
                                                });
                                                this.initData();
                                            }else{
                                                this.$message({
                                                    message: '客户名称已存在，验证不通过！',
                                                    type: 'warning'
                                                });
                                            }

                                        }).catch();
                                }
                        })
                    }
                })
            },
            file2Xce(file) {
                return new Promise(function(resolve) {
                    const reader = new FileReader()
                    reader.onload = function(e) {
                        const data = e.target.result
                        this.wb = XLSX.read(data, {
                            type: 'binary'
                        })
                        const result = []
                        this.wb.SheetNames.forEach((sheetName) => {
                            result.push({
                                sheetName: sheetName,
                                sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
                            })
                        })
                        resolve(result)
                    }
                    reader.readAsBinaryString(file.raw)
                    // reader.readAsBinaryString(file) // 传统input方法
                })
            },
            checkAll(i){
                window.console.log(this.myclientcount[i])
                this.hblist = this.myclientcount[i];
                this.$set(this.hblist,'updateTime',this.hblist.updateTime);
                this.$set(this.hblist,'chy',this.hblist.clientIndustry);
                this.$set(this.hblist,'cly',this.hblist.clientSource);
                this.$set(this.hblist,'cwz',this.hblist.clientUrl);
                this.$set(this.hblist,'establishPerson',this.hblist.establishPerson);
                this.$set(this.hblist,'establishTime',this.hblist.establishTime);
                this.$set(this.hblist,'cname',this.hblist.clientName);
                this.$set(this.hblist,'cjb',this.hblist.clientRank);
                this.$set(this.hblist,'cdh',this.hblist.clientPhone);
                this.$set(this.hblist,'csj',this.hblist.clientMobile);
                this.$set(this.hblist,'cdz',this.hblist.clientSite);
                this.$set(this.hblist,'clientSitexq',this.hblist.clientSitexq);
                this.$set(this.hblist,'cbz',this.hblist.clientRemark);
                this.$set(this.hblist,'clientState',1);
                this.$set(this.hblist,'clientSheng',this.hblist.clientSheng);
                this.$set(this.hblist,'clientSz',this.hblist.clientSz);
                this.$set(this.hblist,'emp',this.hblist.empId);
                this.$set(this.hblist,'clientPayattention','加关注');
            },
            xgclient(id){//修改方法
                this.$router.push({
                    path:'/xjkh',
                    query: {key:id}
                });
            },
            //客户查询方法
            initData(){
                window.console.log("客户状态"+this.xsgj);
                this.$axios.post("http://localhost:8088/client-list",this.qs.stringify(
                    {search:this.input3, page:this.currPage, size:this.pageSize, search1:this.xsgj}))
                    .then(v=>{
                        this.clientList = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            changePage(v){
                this.currPage = v;
                this.initData();
            },
            //已关注客户查询方法
            initDatagz(){
                window.console.log(this.inputgz);
                this.$axios.post("http://localhost:8088/clientgz-list",this.qs.stringify(
                    {search:this.inputgz, page:this.currPagegz, size:this.pageSizegz}))
                    .then(v=>{
                        this.clientgzList = v.data.rows;
                        this.totalSizegz = v.data.total;
                    })
                    .catch()
            },
            changePagegz(v){
                this.currPagegz = v;
                this.initDatagz();
            },
            initDatazt(){//失效客户查询
                window.console.log(this.input3zt);
                this.$axios.post("http://localhost:8088/clientzt-list",this.qs.stringify(
                    {search:this.input3zt, page:this.currPagezt, size:this.pageSizezt}))
                    .then(v=>{
                        this.clientztList = v.data.rows;
                        this.totalSizezt = v.data.total;
                    })
                    .catch()
            },
            changePage1(v){
                this.currPagezt = v;
                this.initDatazt();
            },
            jgzclient(){//加关注方法
                var list = JSON.stringify({khdxlist:this.multipleTable});
                this.print("khlist:"+list);
                this.$axios.post("http://localhost:8088/jgzclient-list",this.qs.stringify({
                    khdx:list
                })).then(() => {
                        this.print("数据："+this.multipleTable);
                        this.clientList.forEach((kh)=>{
                            this.print(kh);
                            this.initData();
                            this.initDatagz();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已关注！',
                        });
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '失败',
                            type: 'error'
                        });
                })
            },
            //客户单行加关注方法
            dhjgzclient(row){
                this.multipleTable[0] =row;
                this.jgzclient();
            },
            ygzclient(){//已关注改加关注方法
                var list = JSON.stringify({khdxlist:this.multipleTablegz});
                this.print("khlist:"+list);
                this.$axios.post("http://localhost:8088/ygzclient-list",this.qs.stringify({
                    khdx:list
                })).then(() => {
                        this.print("数据："+this.multipleTablegz);
                        this.clientList.forEach((kh)=>{
                            this.print(kh);
                            this.initDatagz();
                            this.initData();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '已取消关注！',
                        });
                    }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '失败',
                            type: 'error'
                        });
                })
            },
            //客户单行已关注改加关注方法
            dhygzclient(row){
                this.multipleTablegz[0] =row;
                this.ygzclient();
            },
            //员工查询方法
            initDatatk(){
                window.console.log("yg:111")
                this.$axios.post("http://localhost:8088/findemp-list",this.qs.stringify(
                    {search:this.empinput, page:this.currPagetk, size:this.pageSizetk,}))
                    .then(v=>{
                        this.emplist = v.data.rows;
                        window.console.log("yg:"+this.emplist)
                        this.totalSizetk = v.data.total;
                    })
                    .catch()
            },
            changePagetk(v){
                this.currPagetk = v;
                this.initDatatk();
            },
            handleSizeChangetk(val){
                window.console.log('每页${val}条')
                this.initDatatk(1,this.pageSizetk=val,this.emplist)
            },
            /*批量逻辑删除方法*/
            truedetbus(){
                var list = JSON.stringify({khdxlist:this.multipleTable});
                this.print("khlist:"+list);
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/dclients-list",this.qs.stringify({
                        khdx:list
                    })).then(w => {
                        this.clientsid = w.data;
                        this.print('tsb'+w.data)
                        if(this.clientsid == 0){
                            this.$message({
                                type: 'info',
                                message: '客户有对应的商机不能进行删除操作！'
                            });
                        }else{
                            this.print("数据："+this.multipleTable);
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '删除成功!',
                            });
                            this.clientList.forEach((kh)=>{
                                this.print(kh);
                                this.initData();
                                this.initDatazt();
                                this.initDatagz();
                            });
                        }
                    }).catch(v=> {
                        alert("加载失败删除："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //客户单行逻辑删除方法
            scclient(row){
                this.multipleTable[0] =row;
                this.truedetbus();
            },
            /*批量恢复记录方法*/
            plclient(){
                var list = JSON.stringify({khdxlist:this.multipleTablezt});
                this.print("khlist:"+list);
                this.$confirm('此操作将恢复该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/clienthf-list",this.qs.stringify({
                        khdx:list
                    })).then(() => {
                        this.print("数据："+this.multipleTablezt);
                        this.clientztList.forEach((kh)=>{
                            this.print(kh);
                            this.initDatazt();
                            this.initDatagz();
                            this.initData();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '恢复成功!',
                        });
                    }).catch(v=> {
                        alert("加载失败恢复："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消恢复'
                    });
                });
            },
            //客户单行恢复状态方法
            hfclient(row){
                this.multipleTablezt[0] =row;
                this.plclient();
            },
            /*批量客户物理删除方法*/
            wlscclients(){
                var list = JSON.stringify({khdxlist:this.multipleTablezt});
                this.print("khlist:"+list);
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("http://localhost:8088/dclient-list",this.qs.stringify({
                        khdx:list
                    })).then(() => {
                        this.print("数据："+this.multipleTablezt);
                        this.clientztList.forEach((kh)=>{
                            this.print(kh);
                            this.initDatazt();
                            this.initDatagz();
                            this.initData();
                        });
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: '删除成功!',
                        });
                    }).catch(v=> {
                        alert("加载失败删除："+v.data);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //单行客户物理删除方法
            sckh(row){
                this.multipleTablezt[0] =row;
                this.wlscclients();
            },
            /*跳转详情方法*/
            todetails(rows){
                rows = escape(Crypto.set(rows.clientId)); // 加密数据
                this.$router.push({
                    path:'/tfyxq',
                    query: {
                        row:rows
                    }
                });
            },
            emptodetails(pro){
                this.clients.empId=pro;
                window.console.log("id"+this.clients.empId)
                this.empinput='';
            },
            zyff(){//转移按钮
                var fzr = this.multipleTable[0].empId.empId;
                var a1 =0;
                this.multipleTable.forEach(a=>{
                    if(fzr!= a.empId.empId){
                        this.$message({
                            type: 'info',
                            message: '请勾选同一负责人进行操作'
                        });
                        a1 =1;
                    }
                })
                this.print(a1)
                if(a1==0){
                    this.dialogFormVisible = true;
                    this.$refs.clientList.selection.forEach((por)=>{
                        this.clients = por;
                    })
                }
            },
            //复选框选中的
            handleSelectionChange(val) {
                this.multipleTable = val;//  this.multipleTable 选中的值
                if(this.multipleTable.length>0){
                    this.cjy=false;//第一行隐藏
                    this.cje=true;//批量操作栏出现
                }
                if(this.multipleTable.length==0){//选中项为0时
                    this.cjy=true;//第一行出现
                    this.cje=false;//批量操作栏隐藏
                }
                window.console.log(val);
            },
            //已失效复选框选中的
            handleSelectionChangezt(val) {
                this.multipleTablezt = val;//  this.multipleTable 选中的值
                if (this.multipleTablezt.length > 0) {
                    this.cjyzt = false;//第一行隐藏
                    this.cjezt = true;//批量操作栏出现
                }
                if (this.multipleTablezt.length == 0) {//选中项为0时
                    this.cjyzt = true;//第一行出现
                    this.cjezt = false;//批量操作栏隐藏
                }
                window.console.log(val);
            },
            //已关注客户复选框选中的
            handleSelectionChangegz(val) {
                this.multipleTablegz = val;//  this.multipleTable 选中的值
                if (this.multipleTablegz.length > 0) {
                    this.cjygz = false;//第一行隐藏
                    this.cjegz = true;//批量操作栏出现
                }
                if (this.multipleTablegz.length == 0) {//选中项为0时
                    this.cjygz = true;//第一行出现
                    this.cjegz = false;//批量操作栏隐藏
                }
                window.console.log(val);
            },
            gotoMenu(){
                this.$router.replace('/xjkh')
            },
            gotoMenuzt() {
                this.$router.replace('/xjkh')
            },
            gotoMenugz() {
                this.$router.replace('/xjkh')
            },
            handleSizeChange(val){
                window.console.log('每页${val}条')
                this.initData(1,this.pageSize=val,this.clientList,this.xsgj)
            },
            handleSizeChangezt(val){
                window.console.log('每页${val}条')
                this.initDatazt(1,this.pageSizezt=val,this.clientztList)
            },
            handleSizeChangegz(val){
                window.console.log('每页${val}条')
                this.initDatagz(1,this.pageSizegz=val,this.clientgzList)
            },
            handleClick(tab, event) {//标签页
                console.log(tab, event);
            },
            addClient(){
                    this.$axios.post("http://localhost:8088/addclient-list", this.clients)
                        .then(() => {
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '修改成功!',
                            });
                            this.initData();
                            this.dialogFormVisible = false;
                        }).catch(() => {
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error'
                        });
                    })
            },
        },
        computed:{
            count(){
                return this.multipleTable.length
            },
            countzt() {
                return this.multipleTablezt.length
            },
            countgz() {
                return this.multipleTablegz.length
            },
            colcount(){
                return this.colOptions.length;
            }
        },
        created: function () {
            this.pageSize = this.sizes[0];
            this.initData(this.currPage, this.pageSize,this.xsgj);
            this.pageSizezt = this.sizeszt[0];
            this.initDatazt(this.currPagezt, this.pageSizezt);
            this.initDatatk();//员工查询
            this.pageSizegz = this.sizesgz[0];
            this.initDatagz(this.currPagegz, this.pageSizegz);
        },
        filters:{
            formatDate: function(time) {
                if(time != null && time != ""){
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                }else{
                    return "";
                }
            }
        }
    }
</script>

<style scoped>
    .qxkh1{
        color: #409EFF;
        cursor:pointer;
    }
    th a:hover{
        color: #F05050;
        cursor:pointer;
    }
    .table_sty{
        border:1px solid #FFFFFF;
        width: 65%;
        height: 320px;
        max-height: 330px;
        overflow:hidden;
        overflow-y: auto;
    }
    table{
        /*display:inline-block;*/
        width: 905px;
        height: 300px;
        overflow:hidden;
        border-collapse:collapse;
        border-color: #BFBFBF;
        border: #BFBFBF;
    }
    th{
        height: 45px;
        width: 80px;
    }
    tr{
        height: 45px;
    }
    .div1{
        transform:translateY(-120%);/**上移元素**/
        -ms-transform:translateY(-70%);
        -webkit-transform:translateY(-98%);
        margin-left: 206px;
    }
    .tk{
        transform:translateY(-50%);/**上移元素**/
        -ms-transform:translateY(-50%);
        -webkit-transform:translateY(-160%);
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }
    .selected—title1 span{
        margin-left: 18px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
    .selected—title2{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 129px;
        height:20px;
        float: left;
        cursor: pointer;
    }
    .selected—title2 span{
        margin-left: 28px;
    }
    .selected—title2 span:hover{
        color:#409eff;
    }
    .businame{
        color: #409EFF;
        cursor:pointer;
    }
</style>